<template>
  <el-container>
    <el-aside width="200px">
      <el-menu
        unique-opened
        text-color="#fff"
        active-text-color="#ffd04b"
        default-active="1-1"
        background-color="#585E64"
      >
        <el-submenu index="1">
          <template slot="title">供应商合同管理</template>
          <el-menu-item index="1-1">入库管理</el-menu-item>
          <el-menu-item index="1-2">退用管理</el-menu-item>
        </el-submenu>
        <el-submenu index="2">
          <template slot="title">客戶合同管理</template>
          <el-menu-item index="2-1">分配管理</el-menu-item>
          <el-menu-item index="2-2">回收管理</el-menu-item>
        </el-submenu>
        <el-submenu index="3">
          <template slot="title">客戶合同变更</template>
          <el-menu-item index="3-1">续约/变更</el-menu-item>
        </el-submenu>
        <el-submenu index="4">
          <template slot="title">消息合同列表</template>
          <el-menu-item index="4-1">待处理合同</el-menu-item>
          <el-menu-item index="4-2">已处理合同</el-menu-item>
          <el-menu-item index="4-3">旧合同列表</el-menu-item>
        </el-submenu>
      </el-menu>
    </el-aside>
    <el-main></el-main>
  </el-container>
</template>

<script>
export default {
  name: 'stock'
}
</script>

<style scoped>
.el-aside {
  height: calc(100vh - 60px);
  background-color: #585e64;
  overflow-y: hidden;
}

.el-menu {
  border: 0;
}

.el-submenu:hover {
  background-color: #585e64;
}

.el-menu-item {
  background-color: #585e64;
}

.el-menu-item:hover {
  background-color: #3f454b;
}

.el-main {
  padding: 16px;
  height: calc(100vh - 60px);
}
</style>
